<template>
  <section>
    <span class="label"
          :title="row.abbr">{{ row.abbr }}</span>
    <el-popover ref="popover"
                v-model="popover"
                trigger="click"
                placement="right">
      <i slot="reference"
         class="el-icon-edit pointer"
         style="color:var(--prev-color-primary);"
         type="primary" />
      <el-form :inline="true"
               style="padding-top: 18px;">
        <el-form-item>
          <el-input v-model.trim="abbr"
                    placeholder="承运商简称"
                    maxlength="20" />
        </el-form-item>
        <el-form-item>
          <el-button type="text"
                     :loading="loading"
                     :disabled="disabled"
                     @click="handleSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-popover>
  </section>
</template>

<script>
import { basic } from "@/api";
export default {
  name: "CarrierAbbr",
  inheritAttrs: true,
  props: {
    row: Object
  },
  data () {
    return {
      abbr: "",
      loading: false,
      popover: false,
    };
  },
  computed: {
    disabled () {
      return this.row?.abbr === this.abbr || !this.abbr;
    },
    carrierId () {
      return this.row?.carrierId;
    },
  },
  watch: {
    row () {
      this.abbr = this.row?.abbr;
    }
  },
  created () {
    this.abbr = this.row?.abbr;
  },
  methods: {
    handleSubmit () {
      this.updateAbbr();
    },
    async updateAbbr () {
      this.loading = true;
      const { code } = await basic.setCarrierAbbr({
        carrierId: this.carrierId,
        abbr: this.abbr
      })
      this.loading = false;
      if (code === 0) {
        this.row.abbr = this.abbr;
        this.$message({ type: "success", message: "修改成功" });
        this.popover = false;
      }
    }
  }
};
</script>
<style scoped>
.label {
  /* max-width: 200px; */
  /* display: inline-block; */
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}
</style>